<template>
    <view class="content">
      <view class="info">
        <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="avatar"></image>
        </button>
        <u-form>
          <u-form-item label="姓名"
            ><u-input v-model="name" placeholder="请输入昵称"
          /></u-form-item>
          <u-form-item label="手机"><u-input v-model="phone" /></u-form-item>
        </u-form>
      </view>
      <view class="footer">
        <u-button type="primary" plain @click="updateUserInfo()">提交</u-button>
      </view>
      <u-toast ref="uToast" />
    </view>
  </template>
    
    <script>
  export default {
    data() {
      return {
        avatar:
          "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
        name: "",
        theme: wx.getSystemInfoSync().theme,
        phone: "",
      };
    },
    onLoad() {
      wx.onThemeChange((result) => {
        this.theme = result.theme;
      });
      this.getUserInfo();
    },
    methods: {
      onChooseAvatar(e) {
        this.avatar = e.detail.avatarUrl;
      },
      async getUserInfo() {
        let res = await this.$u.api.getUserInfo();
        res.data.avatar ? (this.avatar = res.data.avatar) : "";
        res.data.name ? (this.name = res.data.name) : "";
        res.data.phone ? (this.phone = res.data.phone) : "";
      },
      async updateUserInfo() {
        await this.$u.api.updateUserInfo(this.avatar, this.name, this.phone);
        this.$refs.uToast.show({
          title: "更新成功",
        });
        setTimeout(() => {
          this.$u.route({
            type: "navigateBack",
            delta: 1,
          });
        }, 2000);
      },
    },
  };
  </script>
    
    <style lang="scss" scoped>
  .avatar-wrapper {
    padding: 0;
    width: 112rpx !important;
    border-radius: 16rpx;
    margin-top: 80rpx;
    margin-bottom: 80rpx;
  }
  
  .avatar {
    display: block;
    width: 56px;
    height: 56px;
  }
  .info {
    margin: 20rpx;
  }
  .footer {
    // width: 100%;
    padding: 0rpx 200rpx;
    text-align: center;
    // position: fixed;
    margin-top: 100rpx;
  }
  </style>